<template>
  <div class='alarm-dialog-wrapper flex'>
    <div class="tabs-wrapper">
      <el-button v-for="item in tabsList" type="primary" :key="item.type" :class="currentComponent === item.component ? 'btn_group_active' : 'btn_group'" @click="clickTabs(item.component)">
        {{ item.label }}
      </el-button>
    </div>
    <transition name="tab" mode="out-in">
      <keep-alive>
        <component :is="currentComponent" v-model="details" :dictMap="dictMap" />
      </keep-alive>
    </transition>
  </div>
</template>
<script>
import DeviceDetail from '@/views/dataMonitoring/detail/DeviceDetail';
import RealTimeMonitoring from '@/views/dataMonitoring/detail/RealTimeMonitoring';
import AlarmRecord from '@/views/dataMonitoring/detail/AlarmRecord';
import RunningRecord from '@/views/dataMonitoring/detail/RunningRecord';
import OperationRecord from '@/views/dataMonitoring/detail/OperationRecord';
export default {
  props: {
    dictMap: {
      type: Object,
      default: () => { },
    },
    details: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      tabsList: [
        {
          label: '设备详情',
          component: 'DeviceDetail'
        },
        {
          label: '实时监控',
          component: 'RealTimeMonitoring'
        },
        {
          label: '告警记录',
          component: 'AlarmRecord'
        },
        {
          label: '运行记录',
          component: 'RunningRecord'
        },
        {
          label: '操作记录',
          component: 'OperationRecord'
        },
      ],
      currentComponent: 'DeviceDetail',
    };
  },
  created() {
    if (this.details.deviceTypeKey === "encodeDevice") {
      this.tabsList = this.tabsList.filter(item => item.component !== 'RunningRecord')
    }
    this.currentComponent = 'DeviceDetail'
  },
  watch: {
    // details: {
    //   handler() {
    //     console.log("details:",details)
    //     if(!details.deviceTypeKey){
    //       this.tabsList = this.tabsList.filter(item => item.component!==RunningRecord)
    //     }
    //     this.currentComponent = 'DeviceDetail'
    //   },
    //   deep: true
    // }
  },
  methods: {
    clickTabs(comp) {
      this.currentComponent = comp
    }
  },
  components: {
    DeviceDetail,
    RealTimeMonitoring,
    AlarmRecord,
    RunningRecord,
    OperationRecord
  },
}
</script>

<style lang='less' scoped>
.alarm-dialog-wrapper {
  flex-direction: column;

  .tabs-wrapper {
    display: flex;
    margin-bottom: 15px;
  }
}
</style>